<template>
  <el-row :gutter="20">
    <el-col :span="9">
      <el-card>
        <el-descriptions :column="1" title="个人信息">
          <el-descriptions-item align="center">
            <el-avatar :size="100" :src="userData.userStore.avatar" shape="square" />
          </el-descriptions-item>
          <el-descriptions-item align="left" min-width="400px" width="500px">
            <template #label>
              <el-icon>
                <user />
              </el-icon>
              用户名：
            </template>
            {{ userData.userStore.loginName }}
          </el-descriptions-item>
          <el-descriptions-item align="left" min-width="400px" width="500px">
            <template #label>
              <el-icon>
                <Iphone />
              </el-icon>
              电话：
            </template>
            {{ userData.userStore.phone }}
          </el-descriptions-item>
          <el-descriptions-item align="left" min-width="400px" width="500px">
            <template #label>
              <el-icon>
                <Message />
              </el-icon>
              邮箱：
            </template>
            {{ userData.userStore.email }}
          </el-descriptions-item>
          <el-descriptions-item align="left" label="公司" min-width="400px" width="500px">
            <template #label>
              <el-icon>
                <OfficeBuilding />
              </el-icon>
              公司：
            </template>
            {{ userData.detail.compamyName || '' }}
          </el-descriptions-item>
          <el-descriptions-item align="left" label="部门" min-width="400px" width="500px">
            <template #label>
              <el-icon>
                <PieChart />
              </el-icon>
              部门：
            </template>
            {{ userData.detail.deptList || '' }}
          </el-descriptions-item>
          <el-descriptions-item align="left" label="所属角色" min-width="400px" width="500px">
            <template #label>
              <el-icon>
                <UserFilled />
              </el-icon>
              岗位：
            </template>
            {{ userData.detail.jobList || '' }}
          </el-descriptions-item>
          <el-descriptions-item align="left" label="所属角色" min-width="400px" width="500px">
            <template #label>
              <el-icon>
                <UserFilled />
              </el-icon>
              所属角色：
            </template>
            {{ userData.detail.roleList || '' }}
          </el-descriptions-item>
          <el-descriptions-item align="left" label="创建日期" min-width="400px" width="500px">
            <template #label>
              <el-icon>
                <Calendar />
              </el-icon>
              创建日期：
            </template>
            {{ userData.userStore.createTime }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-col>
    <el-col :span="15">
      <el-card>
        <div style="font-weight: bold; margin-bottom: 13px">资料修改</div>
        <el-tabs v-model="userData.activeName" class="demo-tabs">
          <el-tab-pane label="基本资料" name="userInfo">
            <el-form ref="userRef" :model="userData.editUser" :rules="userData.userRole" class="demo-ruleForm" label-width="120px">
              <el-form-item label="用户名" prop="loginName">
                <el-input v-model.string="userData.editUser.loginName" autocomplete="off" name="loginName" type="text" />
              </el-form-item>
              <el-form-item label="电话" prop="phone">
                <el-input v-model="userData.editUser.phone" autocomplete="off" type="text" />
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="userData.editUser.email" autocomplete="off" type="text" />
              </el-form-item>
              <el-form-item label="头像：" prop="avatar">
                <ImgUpload v-model:file_url="userData.editUser.avatar" :file_max="1" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitUser(userRef)">保存 </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="密码修改" name="passwordInfo">
            <el-form ref="resPw" :model="userData.restPwdata" :rules="userData.pwRules" label-width="120px">
              <el-form-item label="老密码" prop="oldPassword">
                <el-input v-model="userData.restPwdata.oldPassword" name="oldPassword" type="password" />
              </el-form-item>
              <el-form-item label="新密码" prop="password">
                <el-input v-model="userData.restPwdata.password" name="password" type="password" />
              </el-form-item>
              <el-form-item label="确认输入" prop="conformPassword">
                <el-input v-model="userData.restPwdata.conformPassword" name="conformPassword" type="password" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitPassword(resPw)">保存 </el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
  </el-row>
</template>
<script lang="ts" setup>
import { userInfoClass } from '@/page/types/admin/user'
import { ElMessage, FormInstance } from 'element-plus'
import { getUserInfo, updatePw, updateUser } from '@/api/admin'
import { UploadProps } from 'element-plus/es'
import { tokenStore } from '@/store/token'
import ImgUpload from '@/components/ImgsUpload.vue'
import router from '@/router/router'
const userData = reactive(new userInfoClass())
const userRef = ref()
const resPw = ref()
onMounted(() => {
  getUserInfo().then(res => {
    userData.editUser = res.data
    userData.userStore = res.data
    if (res.data.company) {
      userData.detail.compamyName = res.data.company.name as string
    }
    if (res.data.job) {
      userData.detail.jobList = res.data.job.name as string
    }
    if (res.data.dept) {
      userData.detail.deptList = res.data.dept.name as string
    }
    if (res.data.roleList) {
      userData.detail.roleList = res.data.roleList.map((st: { name: any }) => st.name).join('/')
    }
  })
})
const submitUser = (userRef: FormInstance | undefined) => {
  if (!userRef) return
  const type = userData.editUser.type.name
  userData.editUser.type = type
  updateUser(userData.editUser).then(() => {
    ElMessage({
      message: '更新用户信息成功',
      type: 'success'
    })
  })
}
const submitPassword = (resPw: FormInstance | undefined) => {
  if (!resPw) return
  updatePw(userData.restPwdata).then(() => {
    tokenStore().logOff()
    ElMessage({
      message: '更新密码成功',
      type: 'success'
    })
    router.push('/login')
  })
}
const handleAvatarSuccess: UploadProps['onSuccess'] = response => {
  userData.editUser.avatar = response.data
}
const beforeAvatarUpload: UploadProps['beforeUpload'] = rawFile => {
  if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('Avatar picture size can not exceed 2MB!')
    return false
  }
  return true
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 200px;
}
</style>
